<template>
    <view class="login-container">
      <!-- <view class="header">
        <view class="back-icon" @tap="goBack">
          <text class="iconfont icon-back">←</text>
        </view>
        <view class="title">登录</view>
      </view> -->
      <view class="logo-container">
        <image class="logo" src="@/assets/pic/ico.png" mode="aspectFit"></image>
        <view class="company-name">森链智选</view>
        <view class="en-name">SENLIANZHIXUAN</view>
        <view class="welcome-text">| 敬请光临 |</view>
      </view>
      <view class="login-buttons">
        <nut-button class="btn-primary" @tap="phoneLogin">手机号快捷登录</nut-button>
        <nut-button class="btn-secondary" @tap="cancelLogin">取消登录</nut-button>
      </view>
      <view class="agreement-container">
        <nut-checkbox 
          v-model="isAgreed" 
          shape="round"
          icon-size="32rpx"
          class="custom-checkbox"
        >
          <view class="agreement-text">
            已阅读并同意
            <text class="link-text" @tap="showUserAgreement">《森链智选用户协议》</text>
            及
            <text class="link-text" @tap="showPrivacyPolicy">《森链智选隐私条款》</text>
          </view>
        </nut-checkbox>
      </view>
    </view>
  </template>

  <script setup>
  import { ref } from 'vue';
  import Taro from '@tarojs/taro';

  /**
   * 用户协议同意状态
   * @type {import('vue').Ref<boolean>}
   */
  const isAgreed = ref(false);

  /**
   * 返回上一页
   * 性能优化：使用 Taro.navigateBack 提升导航体验
   */
  const goBack = () => {
    Taro.navigateBack();
  };

  /**
   * 手机号登录处理
   * 性能优化：先验证协议同意状态，避免无效请求
   */
  const phoneLogin = () => {
    if (!isAgreed.value) {
      Taro.showToast({
        title: '请先同意用户协议和隐私条款',
        icon: 'none'
      });
      return;
    }
    // 这里添加手机号登录的逻辑
    Taro.showToast({
      title: '正在跳转登录页面',
      icon: 'loading'
    });
  };

  /**
   * 取消登录
   * 性能优化：提供回退机制确保用户体验
   */
  const cancelLogin = () => {
    Taro.navigateBack({
      fail: () => {
        Taro.switchTab({
          url: '/pages/my/index'
        });
      }
    });
  };

  /**
   * 显示用户协议
   * 性能优化：预加载协议内容提升阅读体验
   */
  const showUserAgreement = () => {
    Taro.navigateTo({
      url: '/pages-detail/my/privacy'
    });
  };

  /**
   * 显示隐私条款
   * 性能优化：预加载隐私条款内容
   */
  const showPrivacyPolicy = () => {
    Taro.navigateTo({
      url: '/pages-detail/my/privacy'
    });
  };
  </script>

  <style lang="scss">
  .login-container {
    height: 100vh;
    background: linear-gradient(135deg, #84b9e4 0%, #46769c 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    position: relative;
    box-sizing: border-box;
  }

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;

    .back-icon {
      font-size: 40rpx;
      margin-right: 20rpx;
    }

    .title {
      font-size: 36rpx;
      font-weight: 500;
    }
  }

  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80rpx;
    animation: fadeIn 1s ease-in-out;

    .logo {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
      filter: drop-shadow(0 10rpx 20rpx rgba(0, 0, 0, 0.1));
    }

    .company-name {
      font-size: 48rpx;
      font-weight: bold;
      color: #e3f2fd;
      margin-bottom: 15rpx;
      text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2), 0 0 10rpx rgba(227, 242, 253, 0.5);
      background: -webkit-linear-gradient(135deg, #e3f2fd, #bbdefb);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .en-name {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 20rpx;
      letter-spacing: 2rpx;
    }

    .welcome-text {
      font-size: 28rpx;
      color: #e3f2fd;
      padding: 10rpx 20rpx;
      background-color: rgba(227, 242, 253, 0.1);
      border-radius: 30rpx;
      box-shadow: 0 0 10rpx rgba(227, 242, 253, 0.3);
      border: 1rpx solid rgba(227, 242, 253, 0.3);
    }
  }

  .login-buttons {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    margin: 40rpx auto;

    .btn-primary {
      width: 100%;
      background-color: #fff;
      color: #2196F3;
      border-radius: 50rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 36rpx;
      font-weight: 500;
      box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5rpx);
        box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.15);
      }
    }

    .btn-secondary {
      width: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 50rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 36rpx;
      font-weight: 500;
      border: 2rpx solid #fff;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-5rpx);
      }
    }
  }

  .agreement-container {
    width: 90%;
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;

    .custom-checkbox {
      color: #fff;
      font-size: 28rpx;

      .agreement-text {
        .link-text {
          color: #fff;
          text-decoration: underline;
          transition: color 0.3s ease;

          &:hover {
            color: #e3f2fd;
          }
        }
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  </style>